<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="阿福易购">
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <!-- uc、qq浏览器 -->
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="320">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta name="keywords" content="{{$SEO['keywords']}}"/>
    <meta name="description" content="{{$SEO['description']}}"/>
    <title>商品评价_{{$SEO['title']}}</title>
    <link rel="stylesheet" href="{{ asset('/build/css/app.min.css') }}">
</head>
<body ontouchstart="">
<header class="ui-header ui-header-stable  af-header">
    <ul class="ui-row-flex">
        <li class="ui-col ui-flex ui-flex-pack-start">
            <i ontouchstart="window.history.back();" class="ui-icon-return"></i>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-center">
            <h1>商品评价</h1>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-end">
        </li>
    </ul>
</header>
@inject('pictureService','App\Interfaces\PictureService')
<footer class="ui-footer ui-goods-footer">
    <div class="ui-row-flex">
        <div class="ui-col">
            <div class="ui-form-item ui-form-item-switch" style="height: 50px;">
                <p>
                    匿名评价
                </p>
                <label class="ui-switch ui-switch-primary">
                    <input class="J-anoCheck" type="checkbox" checked>
                </label>
            </div>
        </div>
        <div class="ui-col">
            <button id="addCartBtn" class="ui-btn ui-btn-cart">确定</button>
        </div>
    </div>

</footer>


<div class="ui-container">
    <div class="ui-my-order-comment">
        <ul class="ui-list ui-list-function ui-border-tb">
            <li>
                <div data-href="/goods/show/{{$goods->goods_id}}" class="ui-list-img">
                    <span style="background-image:url('{{$pictureService::thumb($goods->goods_thumb),254,254}}')"></span>
                </div>
                <div data-href="/goods/show/{{$goods->goods_id}}" class="ui-list-info" style="padding-right: 0;">
                    <h4 class="ui-nowrap">{{$goods->goods_name}}</h4>
                    <p class="ui-nowrap">{{$goods->goods_pet_name}}</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="ui-form ui-border-t ui-form-comment">
        <form action="/comment/add_comment">
            <input type="hidden" class="J-ano" name="niming" value="1">
            <input type="hidden" name="goods_id" value="{{$goods->goods_id}}">
            <input id='order_id' type="hidden" name="order_id" value="{{$order_id}}">
            <input type="hidden" name="order_goods_id" value="{{$order_goods_id}}">
            <section class="ui-panel ui-panel-simple ui-border-b">
                <h2>
                    <span>描述相符</span>
                    <span class="ui-panel-title-tips">
                        <span class="ui-score ui-score-lg">
                            <span class="ui-score-light ui-score-lg" data-txt="1分 很不满意" style="opacity: 1;width: 20%;"></span>
                            <span class="ui-score-light ui-score-lg" data-txt="2分 不满意" style="opacity: 1;width: 20%;"></span>
                            <span class="ui-score-light ui-score-lg" data-txt="3分 一般" style="opacity: 1;width: 20%;"></span>
                            <span class="ui-score-light ui-score-lg" data-txt="4分 满意" style="opacity: 1;width: 20%;"></span>
                            <span class="ui-score-light ui-score-lg" data-txt="5分 很满意" style="opacity: 1;width: 20%;"></span>
                        </span>
                         <input type="hidden" name="star" required data-reg-msg="请给商品打分" value="5">
                    </span>
                </h2>
            </section>
            <div class="ui-form-item ui-form-item-textarea ui-form-item-pure ui-border-b">
                   <textarea name="content" placeholder="亲！快来给你买过的商品发表评价吧~" required maxlength="500" data-reg-msg="评价不能为空"></textarea>
            </div>
            <div class="camera-area">
                <div class="ui-upload-pic">
                    <form enctype="multipart/form-data" method="post">
                        <div class="ui-upload-btn"><i class="ui-icon-thumb"></i></div>
                        <input type="file" name="fileToUpload" class="ui-file-input fileToUpload" accept="image/*" capture="camera"/>
                        <div class="ui-progress"><span></span></div>
                    </form>
                </div>
                <ul class="J-list ui-grid-trisect ui-whitespace ui-img-thumb thumb"></ul>
            </div><!--/.camera-area-->

        </form>
    </div>

</div>
<script src="{{ asset('/build/lib/zepto.min.js') }}"></script>
<script src="{{ asset('/build/js/frozen.js') }}"></script>
<script src="{{ asset('/build/js/app.min.js') }}"></script>
<script>
    $(function () {
        //评分
        var input = $('.ui-score').siblings('input');
        var score=$('.ui-score .ui-score-light');
        score.on('click',function (e) {
            var that=$(this);
            var index= that.index();

            input.val(index+1);
            score.css('opacity',0);
            topTip(that.attr('data-txt'));
            score.each(function (i) {
                i<=index&&$(this).css('opacity',1);
            });
        });

        //图片上传
        $(".camera-area").fileUpload({
            "url": "/file_upload",//上传路径
            "file": "file"//参数名
        });
        //匿名
        $('.J-anoCheck').on('change',function () {
           $('.J-ano').val($(this).prop('checked')+0);
        });

        //提交
        $('#addCartBtn').on('click',function () {
           $('form').submit();
        });

        //表单验证
        $('form').on('submit',function () {
            var jqForm=$(this);
            var isOK = RegForm(jqForm);
            var order_id =$('#order_id').val();

            if(!isOK) return false;

            var lk=Locked();
            $.ajax({
                url:jqForm.attr('action'),type:'post',dataType:'json',data:jqForm.serialize(),
                success:function(res){
                    if(res.status){
                        //window.location.reload();
                        window.location.href='/comment?order_id='+order_id;
                    }else{
                        topTip(res.message||'提交失败',{type:'warn'});
                    }
                },
                error:function(e){
                    topTip(e.message||'提交失败',{type:'warn'});
                },
                complete:function(){
                    UnLocked(lk);
                }
            });
            return false;
        });

        //删除图片
        $('.J-list').on('click','.ui-icon-close',function () {
            $(this).closest('li').fadeOut(500,function () {
                $(this).remove();
            });
        });

    });
</script>
</body>
</html>